{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'css/global.css' %}">
    <link rel="stylesheet" href="{% static 'css/research.css' %}">
    <title>covid-19_2.0</title>
</head>
<body class="bg">
<header class="top">
    <ul class="top-nav clearfix">
        <li><a href="/index">首页<br>Home</a></li>
        <li><a href="/prediction">&nbsp;预测系统<br>Prediction</a></li>
        <li><a href="/news">&nbsp;&nbsp;新闻报道<br>News Report</a></li>
        <li><a href="/research">相关研究<br>Research</a></li>
        <li><a href="/prevention">预防措施<br>Prevent</a></li>
        <li><a href="/platform">关于平台<br>Platform</a></li>
        <li><a href="/contact">&nbsp;联系我们<br>Connect us</a></li>
    </ul>
</header>

<section style="color: white">
    <div id="father" class="container">
        <div class="section section-1">
            <img src="{% static 'img/研究1.jpg' %}" alt="">
            <div>
                <a href="/iframe/research_1" target="main">Automatic detection of optic disc based on PCA
                    and mathematical morphology</a><!--只有写了target之后才能在iframe框架中变换-->
            </div>
        </div>
        <div class="section section-2">
            <img src="{% static 'img/研究2.jpg' %}" alt="">
            <div>
                <a href="/iframe/research_2" target="main">Deep learning of contagion dynamics on
                complex networks</a>
                <br><!--br为了让这些框框的高度一样-->
                <br>
            </div>
        </div>
        <div class="section section-3">
            <img src="{% static 'img/研究3.jpg' %}" alt="">
            <div>
                <a href="/iframe/research_3" target="main">Machine Learning Models for Government to Predict
                COVID-19 Outbreak</a><br>
            </div>
        </div>
        <div class="section section-4">
            <img src="{% static 'img/研究4.jpg' %}" alt="">
            <div>
                <a href="/iframe/research_4" target="main">传染病预测预警方法在我国的应用现状</a>
                <br><br>
            </div>
        </div>
        <div class="section section-5">
            <img src="{% static 'img/研究5.jpg' %}" alt="">
            <div>
                <a href="/iframe/research_5" target="main">基于 SEIR 的新冠肺炎传播模型及拐点预测分析</a>
                <br><br>
            </div>
        </div>
        <div class="section section-6">
            <img src="{% static 'img/研究6.png' %}" alt="">
            <div>
                <a href="/iframe/research_6" target="main">基于深度学习的新型冠状病毒肺炎疫情的动态监测研究</a>
                <br><br>
            </div>
        </div>
        <div class="section section-7">
            <img src="{% static 'img/研究7.jpg' %}" alt="">
            <div>
                <a href="/iframe/research_7" target="main">新冠肺炎疫情极限 IR 实时预测模型</a>
                <br><br><br>
            </div>
        </div>
        <div class="section section-8">
            <img src="{% static 'img/研究8.jpg' %}" alt="">
            <div>
                <a href="/iframe/research_8" target="main">运用 Dropout-LSTM 模型的新冠肺炎趋势预测</a>
                <br><br>
            </div>
        </div>
    </div>
</section>

<!--<iframe src="iframe/research_1" name="main" frameboder="0"></iframe>-->


<script charset="utf-8" src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script>/*鼠标滚动导航栏特效无响应，但换成window就可以相应，大概问题就是滚动贴合的时候父容器是father而不是window，但不知道为什么换成father也无响应*/
window.addEventListener('scroll', function () {
    console.log('1111');
    let top = document.querySelector('.top');
    if ( window.scrollY > 0) {
        console.log('2222');
        top.classList.add("bian");
    } else {
        top.classList.remove("bian");
        console.log('3333');
    }
})
</script>
</body>
</html>